<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition template="/templates/user_template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core">

	<ui:define name="title">
        Chocolor:Add order
    </ui:define>

	<ui:define name="content">


		<c:if test="#{securityBean.isAuthenticated()}">
			<c:if test="#{orderAdd.addOrder}">
				<h:form enctype="multipart/form-data" id="Order">

					<p:messages id="msgs" autoUpdate="true" />
					<p:panelGrid
						style="margin-top:20px; width:100%; border-style:hidden"
						id="addOrderForm">
						<f:facet name="header">
							<p:row>
								<p:column style="border-style:hidden" colspan="2">Order form</p:column>
							</p:row>
						</f:facet>

						<p:row>
							<p:column style="width:200px; border-style:hidden">Client:</p:column>
							<p:column style="border-style:hidden">#{orderAdd.orderDraft.email}</p:column>
						</p:row>

						<p:row>
							<p:column style="border-style:hidden">Order date:</p:column>
							<p:column style="border-style:hidden">#{orderAdd.orderDraft.orderDraftDate}</p:column>

						</p:row>

						<p:row>
							<p:column style="border-style:hidden">Choose article: *	</p:column>
							<p:column style="border-style:hidden">
								<p:panelGrid style="border-style:hidden">
									<p:row>
										<p:column style="border-style:hidden">
											<p:selectOneMenu value="#{orderAdd.orderDraft.articleId}"
												style="border-style:hidden" id="Article" effect="fade"
												onchange="submit()" required="true">
												<f:selectItem itemLabel="Select One" itemValue="" />
												<f:selectItems value="#{orderAdd.getArticles()}"
													var="article" itemLabel="#{article.articleId}"
													itemValue="#{article.articleId}" />
											</p:selectOneMenu>
										</p:column>
										<p:column style="border-style:hidden">
											<p:commandButton value="?"
												style="font-size:50%; vertical-align:55%" immediate="true" />
										</p:column>
									</p:row>
								</p:panelGrid>
							</p:column>
						</p:row>

						<p:row>
							<p:column style="border-style:hidden">Insert your logotype: * </p:column>
							<p:column style="border-style:hidden">

								<!-- 	ADD LOGOTYPE FIELD     -->
								<p:outputPanel autoUpdate="true" id="Logotype">
									<p:panelGrid style="border-style:hidden">
										<p:row>
											<p:column style="border-style:hidden">
												<c:if test="#{!orderAdd.logotypeExists()}">
													<p:fileUpload id="upload"
														fileUploadListener="#{orderAdd.handleLogotypeUpload}"
														mode="advanced" multiple="false" label="Add sketch"
														showButtons="false" auto="true"
														allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
														invalidFileMessage="Invalid file"
														invalidSizeMessage="Invalid file size" sizeLimit="1000000"
														required="true">
													</p:fileUpload>
												</c:if>
											</p:column>

											<c:if test="#{orderAdd.logotypeExists()}">
												<p:column style="border-style:hidden">
													<br />
													<p:commandLink value="#{orderAdd.orderDraft.orderName}"
														ajax="false" immediate="true">
														<p:fileDownload
															value="#{orderAdd.getBufferDownloadFile()}" />
													</p:commandLink>
												</p:column>
												<p:column style="border-style:hidden">
													<p:commandButton value="Reset logotype"
														action="#{orderAdd.resetLogotype()}" ajax="false"
														immediate="true" />
												</p:column>
											</c:if>
											<p:column style="border-style:hidden">
												<p:commandButton value="?"
													style="font-size:50%; vertical-align:55%" immediate="true" />
											</p:column>
										</p:row>
									</p:panelGrid>
								</p:outputPanel>
								<!-- 	/ADD LOGOTYPE FIELD     -->

							</p:column>

						</p:row>

						<p:row>
							<p:column style="border-style:hidden">Insert your inscription: </p:column>
							<p:column style="border-style:hidden">
								<p:panelGrid style="border-style:hidden">
									<p:row>
										<p:column style="border-style:hidden">
											<p:inputText id="Inscription" maxlength="45"
												value="#{orderAdd.orderDraft.inscription}"
												required="false">
												<p:ajax event="keyup" update="counter" />
											</p:inputText>
										</p:column>
										<p:column style="border-style:hidden">
											<h:outputText id="counter"
												value="#{orderAdd.getInscriptionCountDown()}" />
										</p:column>
										<p:column style="border-style:hidden">
											<p:commandButton value="?"
												style="font-size:50%; vertical-align:55%" immediate="true" />
										</p:column>
									</p:row>
								</p:panelGrid>
							</p:column>

						</p:row>

						<p:row>
							<p:column style="border-style:hidden">Choose frame: * </p:column>
							<p:column style="border-style:hidden">
								<p:panelGrid style="border-style:hidden">
									<p:row>
										<p:column style="border-style:hidden">
											<p:selectOneMenu value="#{orderAdd.orderDraft.hasFrame}"
												id="Frame" effect="fade" required="true">
												<f:selectItem itemLabel="Please, select" itemValue="" />
												<f:selectItem itemLabel="No frame" itemValue="false" />
												<f:selectItem itemLabel="With frame" itemValue="true" />
											</p:selectOneMenu>
										</p:column>
										<p:column style="border-style:hidden">
											<p:commandButton value="?"
												style="font-size:50%; vertical-align:55%" immediate="true" />
										</p:column>
									</p:row>
								</p:panelGrid>
							</p:column>

						</p:row>

						<p:row>
							<p:column style="border-style:hidden">Select chocolate type: * </p:column>
							<p:column style="border-style:hidden">
								<p:panelGrid style="border-style:hidden">
									<p:row>
										<p:column style="border-style:hidden">
											<p:selectOneMenu
												value="#{orderAdd.orderDraft.chocolateId}"
												id="Chocolate" effect="fade" required="true">
												<f:selectItem itemLabel="Select One" itemValue="" />
												<f:selectItems value="#{orderAdd.getChocolates()}"
													var="chocolate" itemLabel="#{chocolate.rawType}"
													itemValue="#{chocolate.chocolateId}" />
											</p:selectOneMenu>
										</p:column>
										<p:column style="border-style:hidden">
											<p:commandButton value="?"
												style="font-size:50%; vertical-align:55%" immediate="true" />
										</p:column>
									</p:row>
								</p:panelGrid>
							</p:column>

						</p:row>

						<p:row>
							<p:column style="border-style:hidden">Choose packing: * </p:column>
							<p:column style="border-style:hidden">
								<p:panelGrid style="border-style:hidden">
									<p:row>
										<p:column style="border-style:hidden">
											<p:selectOneMenu value="#{orderAdd.orderDraft.packingId}"
												id="Packing" required="true" effect="fade">
												<f:selectItem itemLabel="Select One" itemValue="" />
												<f:selectItems value="#{orderAdd.getPackings()}"
													var="packing" itemLabel="#{packing.packingType}"
													itemValue="#{packing.packingId}" />
											</p:selectOneMenu>
										</p:column>
										<p:column style="border-style:hidden">
											<p:commandButton value="?"
												style="font-size:50%; vertical-align:55%" immediate="true" />
										</p:column>
									</p:row>
								</p:panelGrid>
							</p:column>

						</p:row>

						<p:row>
							<p:column style="border-style:hidden">Choose logo colour: * </p:column>
							<p:column style="border-style:hidden">
								<p:panelGrid style="border-style:hidden">
									<p:row>
										<p:column style="border-style:hidden">
											<p:selectOneMenu
												value="#{orderAdd.orderDraft.logoColour}"
												id="LogoColour" required="true" effect="fade">
												<f:selectItem itemLabel="Select One" itemValue="" />
												<f:selectItems value="#{orderAdd.getAllColours()}" />
											</p:selectOneMenu>
										</p:column>
										<p:column style="border-style:hidden">
											<p:commandButton value="?"
												style="font-size:50%; vertical-align:55%" immediate="true" />
										</p:column>
									</p:row>
								</p:panelGrid>
							</p:column>

						</p:row>

						<p:row>
							<p:column style="border-style:hidden">Choose inscription colour: </p:column>
							<p:column style="border-style:hidden">
								<p:panelGrid style="border-style:hidden">
									<p:row>
										<p:column style="border-style:hidden">
											<p:selectOneMenu
												value="#{orderAdd.orderDraft.inscriptionColour}"
												id="InscriptionColour" effect="fade" onchange="submit()"
												required="false">
												<f:selectItem itemLabel="None" itemValue="" />
												<f:selectItems value="#{orderAdd.getAllColours()}" />
											</p:selectOneMenu>
										</p:column>
										<p:column style="border-style:hidden">
											<p:commandButton value="?"
												style="font-size:50%; vertical-align:55%" immediate="true" />
										</p:column>
									</p:row>
								</p:panelGrid>
							</p:column>

						</p:row>
						<p:row>
							<p:column style="border-style:hidden">Choose plato colour: * </p:column>
							<p:column style="border-style:hidden">
								<p:panelGrid style="border-style:hidden">
									<p:row>
										<p:column style="border-style:hidden">
											<p:selectOneMenu
												value="#{orderAdd.orderDraft.platoColour}"
												id="PlatoColour" required="true" effect="fade"
												onchange="submit()">
												<f:selectItem itemLabel="Select One" itemValue="" />
												<f:selectItems value="#{orderAdd.getAllColours()}" />
											</p:selectOneMenu>
										</p:column>
										<p:column style="border-style:hidden">
											<p:commandButton value="?"
												style="font-size:50%; vertical-align:55%" immediate="true" />
										</p:column>
									</p:row>
								</p:panelGrid>
							</p:column>

						</p:row>

						<p:row>
							<p:column style="border-style:hidden">Choose body colour: </p:column>
							<p:column style="border-style:hidden">
								<p:panelGrid style="border-style:hidden">
									<p:row>
										<p:column style="border-style:hidden">
											<p:selectOneMenu
												value="#{orderAdd.orderDraft.bodyColour}"
												id="BodyColour" effect="fade" onchange="submit()">
												<f:selectItem itemLabel="None" itemValue="" />
												<f:selectItems value="#{orderAdd.getBodyColours()}" />
											</p:selectOneMenu>
										</p:column>
										<p:column style="border-style:hidden">
											<p:commandButton value="?"
												style="font-size:50%; vertical-align:55%" immediate="true" />
										</p:column>
									</p:row>
								</p:panelGrid>
							</p:column>

						</p:row>


						<p:row>
							<p:column style="border-style:hidden">Choose quantity: * </p:column>
							<p:column style="border-style:hidden">
								<p:panelGrid style="border-style:hidden">
									<p:row>
										<p:column style="border-style:hidden">
											<p:selectOneMenu value="#{orderAdd.orderDraft.quantity}"
												id="Quantity" effect="fade" onchange="submit()"
												required="true">
												<f:selectItem itemLabel="None" itemValue="" />
												<f:selectItems value="#{orderAdd.getQuantities()}" />
											</p:selectOneMenu>
										</p:column>
										<p:column style="border-style:hidden">
											<p:commandButton value="?"
												style="font-size:50%; vertical-align:55%" immediate="true" />
										</p:column>
									</p:row>
								</p:panelGrid>
							</p:column>

						</p:row>

						<f:facet name="footer">
							<p:row>
								<p:column style="text-align:left; border-style:hidden"
									colspan="2">
									<p:commandButton value="Preview order" id="previewOrder"
										ajax="false" action="#{orderAdd.previewOrder()}" />
									<p:commandButton value="Save draft" id="saveDraft" ajax="false"
										immediate="true" actionListener="#{orderAdd.saveDraft()}"
										icon="ui-icon-disk" />
									<p:commandButton value="Validate" id="validate" />
								</p:column>
							</p:row>

						</f:facet>
					</p:panelGrid>

					<p:blockUI block="addOrderForm" trigger="validate">  
        		VALIDATING...<br />
						<p:graphicImage value="/images/ajax-loader.gif" />
					</p:blockUI>

				</h:form>
			</c:if>
		</c:if>
	</ui:define>
</ui:composition>
